<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <style>
        body,html{
            margin: 0px;
            padding: 0px;
        }
        .div{
            
        }
        .gduo{
            display: -webkit-box;
            overflow: hidden;
            text-overflow: ellipsis;
            -webkit-line-clamp: 1;  /** 如果设置为 2 则表示只显示2行 */
            -webkit-box-orient: vertical;
        }
        /*每个页面公共css */
        .detail .al-right{
            color: #999;

        }
        .detail .list{
            padding: 10px 0;
        }
        .bg-ff{
            background: #fff;
        }
        .content{
            /* height: 100vh; */
        }
        /*每个页面公共css */
        .col-333{
            color: #333;
        }
        .pd-10{
            padding: 1.5rem;
        }
        .pd-20{
            padding: 4rem;
        }
        .pd-15{
            padding: 15px;
        }
        .h-10{
            height: 10px;
        }
        .fx{
            display: flex;
            justify-content: center;
            align-items: center;
        }
        .detail .fon-14{
            font-size: 2.2rem;
        }
        .detail .fon-12{
            font-size: 1.8rem;
        }
        .detail .fon-18{
            font-size:2.6rem;
        }
        .fx-1{
            flex: 1%;
        }
        .al-left{
            text-align: left;
        }
        .al-right{
            text-align: right;
        }
        .al-center{
            text-align: center;
        }
        .log .list{
            padding: 10px 0;
            font-size: 14px;
            border-bottom: 1px solid #efefef;
        }
        .log .list .text{
            color: #555;
        }
        .log .list:last-child{
            border-bottom: none;
        }
        p{
            padding: 5px 0;
        }
        .titlev{
            color: #555;
            font-size: 12px;
        }
        .titlev .lefio{
            width: 4px;
            height: 10px;
            float: left;
            /* display: block; */
            background: #60B2C0 100%;
            border-radius: 100px;

        }
        .top-bg{
            background: url('http://vontao.com:8056/bg.png');
            /* background:#f00; */
            background-repeat: no-repeat;
            background-position: top center;
            height:auto;background-size: cover;
            min-height: 105px;
            border-radius: 0 0 10px 10px;
        }

        .err-bg-f1{
            background: rgb(249, 249, 249) 100%;
        }
        .err-div{
            background: rgb(249, 249, 249) 100%;
            border-radius: 5px;
            padding: 10px;
        }
        .err-h{
            height: 20px;
            border-radius:5px;
            margin-bottom: 10px;
        }
        .err-bg-ff{
            background: #fff;
        }
        .err-img-10{
            width: 110px;
            height: 105px;
            border-radius: 5px;
            margin-bottom: 10px;
        }
        .err-img-100{
            width: 80px;
            height: 80px;
            border-radius: 100%;
            margin-bottom: 10px;
        }

        .border-top{
            border-top: 1px dashed #728392;
        }
        .top-car{
            padding: 20px 10px;
            background: #fff;
            text-align: center;font-size: 2rem;
        }
        .bord-20{
            border-radius: 2rem;
        }
        .bord-10{
            border-radius: 1.5rem;
        }
        .bord-5{
            border-radius: 5px;
        }
        .bord-15{
            border-radius:15px;
        }
        .fon-12{
            font-size: 1rem;
        }
        .fon-14{
            font-size: 1.4rem;
        }
        .fon-16{
            font-size: 1.8rem;
        }
        .fon-18{
            font-size: 2.2rem;
        }
        .z-color{
            color: #5699C3 ;
        },
        .t-color{
            color: #60B2C0 !important;
        }
        h5{
            padding: 10px 0;
        }
        .type-color,h5{
            color: #FD9F4B;
        }
        .a-color{
            color: #50B1EE ;
        }
        *{
            color: #555;
        }
        .detail .images{
            width: 33.33%;
            display: inline-flex;
            margin-right: 10px;
            margin-top: 10px;
            height: 15vh;
            border-radius: 5px;
            background: #d8d8d8;
            border:solid 1px #d8d8d8;
        }
        .detail .images:nth-of-type(3n){
            margin-right: 0px;
        }

        .t-nav{
            font-size: 12px;
            text-align: center;
            padding: 5px 7.5px;
            border-bottom: 1px solid none;
        }
        .t-active{
            color: #67BEA1;
            border-bottom: 1px solid #67BEA1;
        }
        .logo{
            width: 60px;
            height: 60px;
            border-radius: 100%;
            background: #d8d8d8;
            border:solid 1px #d8d8d8;
        }
        .none-err{
            color: #a6a6a6;
            text-align: center;
            padding: 20px 10px 50px 10px;
        }
        .jclixt .old-h{
            height: 10px;background: #f9f9f9;border-radius: 10px;
        }
        .jclixt:last-child  .old-h{
            height: 0;
        }
    </style>
</head>
<body>

<div class=""  id="app" style="font-size: 2rem;background: #ebebeb">
    <div class="top-bg pd-25">
        <div class="pd-20 ">
            <div class="top-car bord-10 " style="padding: 20rpx 0  20rpx 0 ;">
                <p class="fon-14">云南省地理标志产品追溯</p>
                <p><b class="fon-18 z-color">{$code}</b></p>
                <div class=" border-top pd-10 fon-12 al-left " >
                    <div >
                        {$message}
                    </div>
                </div>
                <br>
                <div class="al-center " style="">
                    <svg t="1695741636967" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="7620" style="width: 4rem;height: 4rem" ><path d="M423.724138 459.034483a35.310345 35.310345 0 0 1-35.310345-35.310345V70.62069H70.62069v317.793103h176.551724a35.310345 35.310345 0 0 1 0 70.62069H35.310345a35.310345 35.310345 0 0 1-35.310345-35.310345V35.310345a35.310345 35.310345 0 0 1 35.310345-35.310345h388.413793a35.310345 35.310345 0 0 1 35.310345 35.310345v388.413793a35.310345 35.310345 0 0 1-35.310345 35.310345z" fill="#FD9F4B" p-id="7621"></path><path d="M151.834483 151.834483l155.365517 0 0 155.365517-155.365517 0 0-155.365517Z" fill="#FD9F4B" p-id="7622"></path><path d="M716.8 151.834483l155.365517 0 0 155.365517-155.365517 0 0-155.365517Z" fill="#FD9F4B" p-id="7623"></path><path d="M988.689655 459.034483h-211.862069a35.310345 35.310345 0 0 1 0-70.62069h176.551724V70.62069h-317.793103v353.103448a35.310345 35.310345 0 0 1-70.62069 0V35.310345a35.310345 35.310345 0 0 1 35.310345-35.310345h388.413793a35.310345 35.310345 0 0 1 35.310345 35.310345v388.413793a35.310345 35.310345 0 0 1-35.310345 35.310345z" fill="#FD9F4B" p-id="7624"></path><path d="M151.834483 716.8l155.365517 0 0 155.365517-155.365517 0 0-155.365517Z" fill="#FD9F4B" p-id="7625"></path><path d="M423.724138 1024H35.310345a35.310345 35.310345 0 0 1-35.310345-35.310345V600.275862a35.310345 35.310345 0 0 1 35.310345-35.310345h211.862069a35.310345 35.310345 0 0 1 0 70.62069H70.62069v317.793103h317.793103V600.275862a35.310345 35.310345 0 0 1 70.62069 0v388.413793a35.310345 35.310345 0 0 1-35.310345 35.310345zM600.275862 1024a35.310345 35.310345 0 0 1-35.310345-35.310345V600.275862a35.310345 35.310345 0 0 1 70.62069 0v388.413793a35.310345 35.310345 0 0 1-35.310345 35.310345zM988.689655 681.489655h-81.213793V635.586207H988.689655a35.310345 35.310345 0 0 0 0-70.62069h-116.524138a35.310345 35.310345 0 0 0-35.310345 35.310345v81.213793h-84.744827V600.275862a35.310345 35.310345 0 0 0-70.62069 0v116.524138a35.310345 35.310345 0 0 0 35.310345 35.310345H988.689655a35.310345 35.310345 0 0 0 0-70.62069zM988.689655 1024a35.310345 35.310345 0 0 1-35.310345-35.310345v-120.055172h-236.57931a35.310345 35.310345 0 0 1 0-70.62069H988.689655a35.310345 35.310345 0 0 1 35.310345 35.310345V988.689655a35.310345 35.310345 0 0 1-35.310345 35.310345zM716.8 1024a35.310345 35.310345 0 0 1-35.310345-35.310345v-38.841379a35.310345 35.310345 0 0 1 70.62069 0V988.689655a35.310345 35.310345 0 0 1-35.310345 35.310345z" fill="#FD9F4B" p-id="7626"></path><path d="M833.324138 1024a35.310345 35.310345 0 0 1-35.310345-35.310345v-38.841379a35.310345 35.310345 0 0 1 70.62069 0V988.689655a35.310345 35.310345 0 0 1-35.310345 35.310345z" fill="#FD9F4B" p-id="7627"></path></svg>
                    <br>
                    <span  class="type-color">扫码验真</span>
                </div>
            </div>
        </div>

    </div>

    <!--        产品信息-->
    <div class="pd-15" style="padding-bottom: 0;">
        <div class="pd-10 bg-ff bord-5 detail">
            <h5 class="al-center fon-12">产品信息</h5>
            <div class="fx fon-14 list">
                <div style="width: auto;">产品名称</div>
                <div class="fx-1 al-right t-color ">{$product_info.name}</div>
            </div>
            <div class="fx fon-14 list">
                <div style="width: auto;">规格</div>
                <div class="fx-1 al-right">{$product_info.specifications}</div>
            </div>
            <div class="fx fon-14 list">
                <div style="width: auto;">等级</div>
                <div class="fx-1 al-right">{$grade.rank}</div>
            </div>
            <div class="fx fon-14 list">
                <div style="width: auto;">批号</div>
                <div class="fx-1 al-right">{$batch_info.code}</div>
            </div>
            <div class="fx fon-14 list">
                <div style="width: auto;">生产日期</div>
                <div class="fx-1 al-right">{$product_info.sc_time}</div>
            </div>
            <div class="fx fon-14 list">
                <div style="width: auto;">生产企业</div>
                <div class="fx-1 al-right">{$company_info.name}</div>
            </div>
            <div class="fx fon-14 list">
                <div style="width: auto;">产地</div>
                <div class="fx-1 al-right">{$product_info.characteristic_address}</div>
            </div>
            <div class=" fon-14  list">
                <div style="width: auto;font-size: 1rem">产地介绍</div>
            </div>
            <div class=" fon-14  list">
                <div class="al-right fx-1"  style="width: auto;text-align: left;">{$product_info.introduce}</div>
            </div>
            <div class=" fon-14  list">
                <div style="width: auto;">产品特点</div>
                <div class="fx-1 al-right a-color gduo" ></div>
            </div>
            <div class=" fon-14  list" >
                <div class="al-right fx-1"  style="width: auto;text-align: left;font-size: 1.8rem">{$product_info.characteristic}</div>
                <div></div>
            </div>
            <!-- <div class="fx fon-14 list">
                <div style="width: auto;">VR场景</div>
                <div class="fx-1 al-right "><span class="a-color">立即查看</span></div>
            </div> -->
            <div class="h-10"></div>
            <div class="border-top " style="padding-top: 20rpx;">
                <!--                    <image class="images" @click="lookImg(index,formdata.product_info.images)"  v-for="(item,index) in formdata.product_info.images" :src="imgUrl+item.url" mode="" :key="index"></image>-->
            </div>
        </div>
    </div>
</div>

</body>
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script>
    const { createApp, ref } = Vue
    createApp({
        setup() {
            return {
                formdata:{
                    code:'',
                    batch_info:{},
                    company_info:{}
                }
            }
        },
        async created(){
            var arr = await this.getinfo()
            console.log(arr,'--')
            this.formdata = arr
        },
        methods: {
            async getinfo(){
                const response = await axios.get('/applet/index/getC?c=XPFmGxVtUPRM9k3Kb148WLksK5D1CGYj')
                return response.data
            }
        }

    }).mount('#app')
</script>
</html>